<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <button id="btn1">放大</button>
    <button id="btn2">缩小</button>
    <p id="demo" style="font-size: 10px;">Javass
    </p>

    <hr />

    <p id="demo2" style="font-size: 10px; font-weight: bold;">Javass</p>
</body>
</html>
<script>
    // ��ȡԪ��
    var btn1 = document.getElementById('btn1')
    var btn2 = document.getElementById('btn2')
    var demo = document.getElementById('demo')

    // �Ŵ�
    btn1.onclick = function()
    {
        // ��ȡ�ı���ǰ�����С parseInt ת��Ϊ��ֵ
        var num = parseInt(demo.style.fontSize)

        // ���������ı�������ֵ
        demo.style.fontSize = `${num + 5}px`
    }

    // ��С
    btn2.onclick = function()
    {
        // ��ȡ�����С��ת��Ϊ��ֵ
        var num = parseInt(demo.style.fontSize)

        // ���������ı�������ֵ
        demo.style.fontSize = `${num - 5}px`
    }

    // ----------------������Ч��
    var demo2 = document.getElementById('demo2')
    var Timer; //û�и�ֵ ��Ҫ�������������нӶ�ʱ��

    // ����� ���庯��
    function big()
    {
        var num = parseInt(demo2.style.fontSize)
        console.log(num)

        // �����ж�
        if(num > 100)
        {
            console.log('�Ѿ����Ｋ�ޣ�׼��ֹͣ')

            // �����ʱ�� ����Ŵ�Ķ�ʱ��
            clearInterval(Timer)

            // ��ʼ��С �������ö�ʱ��
            Timer = setInterval(small, 10)

            return false // ����ִֹͣ��
        }else
        {
            // else = ���� û�е���100 ������Ŵ�
            demo2.style.fontSize = `${num + 1}px`
        }
    }

    // ��С����
    function small()
    {
        // �Ȼ�ȡ�ı��������С �ٴ����� ��ֵ����
        var num = parseInt(demo2.style.fontSize)

        // �����ж�
        if(num <= 10)
        {
            // ֹͣ��С����ʼ���

            // �����С�Ķ�ʱ�������������зŴ�Ķ�ʱ��
            clearInterval(Timer)

            // ��������
            Timer = setInterval(big, 10)

            // ����ĳ���ִֹͣ��
            return false

        }else
        {
            // ������С
            demo2.style.fontSize = `${num - 1}px`
        }
    }

    // ���ú���
    // big()

    // ���������ʱ�����ȷŴ��
    // ����һ����ζ�ʱ��
    // Timer��ʱ������ = setInterval(��ʱ��ִ�еĺ�����ʱ������λ������)
    Timer = setInterval(big, 10)

</script>